Part2 - hello vue

learn basic vue javascript frame work for using roslibjs more convenient

#vue   #web   #101  

---

Table of Content

Vue.js is an open-source MVVM framework

Note

Install HTML Preview
and change it’s security permission to view vue html pages

hello

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<div id="app">{{ message }}</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {
            return {
                message: 'Hello Vue3!'
            }
        }
    }).mount('#app')
</script>

Data

The variables in Vue.js are JavaScript style variables
and support all the standard types that are available in vanilla JavaScript.

These types include:

• String - Stores strings
• Number - Stores integers, floating point, and exponential notations
• Boolean - Stores ‘true’ or ‘false’
• Null - Represents null value
• Object - Stores a dictionary
• Array - Stores a list of variables

data

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<div id="app">
    <div>string: {{ name }}</div>
    <div>number: {{ count }}</div>
    <div>bool: {{ visible }}</div>
    <div>array: {{ todos[1] }}</div>
    <div>null: {{ error }}</div>
    <div>object: {{ object.foo }}</div>
</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {
            return {
                name: 'Bob',                    //string
                count: 0,                       //number
                visible: false,                 //boolean
                todos: ['task1', 'task2'],      //array
                error: null,                     //null
                object: {                       //object
                    foo: 'bar'
                }
            }
        }
    }).mount('#app')
</script>

Method

The methods property in the Vue instance contains the definitions of all the functions that the Vue instance can perform.
Function cat called by specific event or where needed

method

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<div id="app">{{get_name()}}</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {
            return {
                greeting: 'Hello world'
            }
        },
        methods: {
                get_name: function(){
                    return this.greeting;
                }
        }
    }).mount('#app')
</script>

Note

using this to refer data variables

---

References

• vue3